<template>
    <Content title="保养完成">
        <view class="container">
            <view class="content">
                <view class="title">协助保养人</view>
                <view class="simple-table-scroll" style="margin-top: 20rpx;">
                    <view class="simple-table">
                        <view class="simple-table-tr">
                            <view class="simple-table-th simple-table-flex">姓名</view>
                            <view class="simple-table-th simple-table-flex">工号</view>
                            <view class="simple-table-th simple-table-flex">操作</view>
                        </view>
                        <view class="simple-table-tr" v-for="(item, index) in assisterList" :key="index">
                            <view class="simple-table-td simple-table-flex">{{item.name}}</view>
                            <view class="simple-table-td simple-table-flex">{{item.empno}}</view>
                            <view class="simple-table-td simple-table-flex">
                                <u-button class="delete-btn" v-if="taskStatus == 2" type="error" hairline plain
                                    :throttleTime="1000" @click="delUser(index)">删除</u-button>
                            </view>
                        </view>
                    </view>
                </view>
                <view v-if="taskStatus == 2" class="add-btn" @click="addUser">+添加</view>
            </view>
            <view class="content" v-for="(subTask, index) in data.dcmMaintainProject" :key="index">
                <u--form>
                    <view class="title">保养内容</view>
                    <view class="box-item">
                        <text class="label">保养项目:</text>
                        <text>{{subTask.itemProject || '--'}}</text>
                    </view>
                    <view class="box-item">
                        <text class="label">保养方式:</text>
                        <text>{{subTask.itemMethod || '--'}}</text>
                    </view>
                    <view class="box-item">
                        <text class="label">保养标准:</text>
                        <text>{{subTask.unitName || '--'}}</text>
                    </view>
                    <view class="box-item">
                        <text class="label">需求人数:</text>
                        <text>{{subTask.minValue || '--'}}</text>
                    </view>
                    <view class="box-item">
                        <text class="label">标准工时:</text>
                        <text>{{subTask.itemHours ? subTask.itemHours + 'min' : '--'}}</text>
                    </view>
                    <view class="box-item">
                        <text class="label">保养位置:</text>
                        <text>{{subTask.bomOrg || '--'}}</text>
                    </view>
                    <view class="box-item">
                        <text class="label">保养结果:</text>
                        <u-radio-group class="box-input" v-model="subTask.resultStatus" placement="row">
                            <u-radio label="正常" name="1" style="margin-right: 20px"></u-radio>
                            <u-radio label="异常" name="2"></u-radio>
                        </u-radio-group>
                    </view>
                    <view class="box-item">
                        <text class="label">结果记录:</text>
                        <u-textarea class="box-input" v-model="subTask.resultValue"
                            placeholder="请填写保养结果记录"></u-textarea>
                    </view>
                    <view class="box-item">
                        <text class="label">保养SOP:</text>
                        <text v-if="subTask.attachment" @click="uni.openDocument(subTask.attachment)">查看</text>
                        <text v-else>--</text>
                    </view>
                    <view class="title">使用物料</view>
                    <view class="simple-table-scroll" style="margin-top: 20rpx;">
                        <view class="simple-table">
                            <view class="simple-table-tr">
                                <view class="simple-table-th">物料号</view>
                                <view class="simple-table-th">品名</view>
                                <view class="simple-table-th">规格</view>
                                <view class="simple-table-th">数量</view>
                                <view class="simple-table-th">操作</view>
                            </view>
                            <view class="simple-table-tr" v-for="(item, index) in subTask.maintainMaterials"
                                :key="index">
                                <view class="simple-table-td">
                                    <text class="link"
                                        @click="editMaterial(subTask.itemId, item)">{{item.materialCode}}</text>
                                </view>
                                <view class="simple-table-td">{{item.materialName}}</view>
                                <view class="simple-table-td">{{item.specification}}</view>
                                <view class="simple-table-td">{{item.num}}</view>
                                <view class="simple-table-td">
                                    <u-button class="delete-btn" v-if="taskStatus == 2" type="error" hairline plain
                                        :throttleTime="1000"
                                        @click="delMaterial(subTask.itemId, subTask.maintainMaterials, item, index)">删除</u-button>
                                </view>
                            </view>
                        </view>
                    </view>
                    <view v-if="taskStatus == 2" class="add-btn" @click="addMaterial(subTask.itemId)">+添加
                    </view>
                    <view class="title">使用工具</view>
                    <view class="simple-table-scroll" style="margin-top: 20rpx;">
                        <view class="simple-table">
                            <view class="simple-table-tr">
                                <view class="simple-table-th">工具物料号</view>
                                <view class="simple-table-th">工具名称</view>
                                <view class="simple-table-th">数量</view>
                                <view class="simple-table-th">保管方式</view>
                                <view class="simple-table-th">操作</view>
                            </view>
                            <view class="simple-table-tr" v-for="(item, index) in subTask.maintainToolList"
                                :key="index">
                                <view class="simple-table-td">
                                    <text class="link"
                                        @click="editUsingTools(subTask.itemId, item)">{{item.toolCode}}</text>
                                </view>
                                <view class="simple-table-td">{{item.toolName}}</view>
                                <view class="simple-table-td">{{item.toolNum}}</view>
                                <view class="simple-table-td">{{item.toolMode}}</view>
                                <view class="simple-table-td">
                                    <u-button class="delete-btn" v-if="taskStatus == 2" type="error" hairline plain
                                        :throttleTime="1000"
                                        @click="delUsingTools(subTask.maintainToolList, item, index)">删除</u-button>
                                </view>
                            </view>
                        </view>
                    </view>
                    <view v-if="taskStatus == 2" class="add-btn" @click="addUsingTools(subTask.itemId, item)">+添加
                    </view>
                </u--form>
            </view>

            <view class="btn-v">
                <view class="but-box">
                    <u-button :throttleTime="300" class="btn" @click="close" text="取消"></u-button>
                    <u-button :throttleTime="300" v-if="taskStatus == 2" class="btn" type="primary" @click="save"
                        text="完成保养" :loading="loading"></u-button>
                </view>
            </view>
        </view>
    </Content>
</template>

<script>
    import Content from "@/components/content/index.vue";
    import {
        getUserInfo
    } from "@/store/user";
    import fetch from "@/utils/fetch";

    export default {
        components: {
            Content,
        },
        data() {
            return {
                id: "",
                item: "",
                taskStatus: "",
                loading: false,
                userInfo: getUserInfo(),
                storageKey: 'deviceMaintainOperator',
                assisterList: [],
                data: {
                    dcmMaintainProject: [{
                        maintainMaterials: [],
                        maintainToolList: [],
                    }],
                },
            };
        },
        watch: {
            loading(val) {
                if (val)
                    uni.showLoading({
                        mask: true,
                    });
                uni.hideLoading();
            }
        },
        onShow: function() {
            const selections = uni.getStorageSync(this.storageKey) || [];
            this.assisterList = Array.isArray(selections) ?
                selections.map((item) => {
                    return {
                        userId: item.id,
                        ...item,
                    };
                }) : [];
            this.getDetail();
        },
        onLoad: function(option) {
            //option为object类型，会序列化上个页面传递的参数
            this.id = option.id;
            this.taskStatus = option.status;
        },
        methods: {
            uploadFile() {
                this.$refs.myUploaderFiles.chooseVideoImage();
            },
            getDetail() {
                const that = this;
                that.$loading.open();
                fetch("post", "/dms/mobile/maintainTask/getTaskDetail", null, {
                    taskId: this.id,
                }).then((res) => {
                    this.data = res.data;
                    that.$loading.close();
                });
            },
            addUser() {
                uni.navigateTo({
                    url: "/pages/common/operator/index?storageKey=" + this.storageKey + '&multiple=true',
                    animationType: "pop-in",
                });
            },
            delUser(index) {
                const selections = uni.getStorageSync(this.storageKey) || [];
                selections.splice(index, 1);
                uni.setStorageSync(this.storageKey, selections);
                this.assisterList = selections;
            },
            addMaterial(subTaskId) {
                uni.navigateTo({
                    url: "/pages/device/maintain-hall/add-material?taskId=" + this.id + '&subTaskId=' +
                        subTaskId,
                    animationType: "pop-in",
                });
            },
            editMaterial(subTaskId, item) {
                uni.navigateTo({
                    url: "/pages/device/maintain-hall/add-material?taskId=" + this.id + '&subTaskId=' +
                        subTaskId + '&item=' + JSON
                        .stringify(item),
                    animationType: "pop-in",
                });
            },
            delMaterial(itemId, list, item, index) {
                const that = this;
                that.$loading.open();
                fetch("GET", `/dms/mobile/maintainTask/deleteById?taskId=${this.id}&itemId=${itemId}&id=${item.id}`)
                    .then((res) => {
                        uni.$emit("openToast", {
                            type: "success",
                            title: "操作成功",
                            complete() {
                                list.splice(index, 1);
                                that.$loading.close();
                            },
                        });
                    });
            },
            addUsingTools(subTaskId) {
                uni.navigateTo({
                    url: "/pages/device/maintain-hall/add-tool?taskId=" + this.id + '&subTaskId=' + subTaskId,
                    animationType: "pop-in",
                });
            },
            editUsingTools(subTaskId, item) {
                uni.navigateTo({
                    url: "/pages/device/maintain-hall/add-tool?taskId=" + this.id + '&subTaskId=' +
                        subTaskId + '&item=' + JSON
                        .stringify(item),
                    animationType: "pop-in",
                });
            },
            delUsingTools(list, item, index) {
                const that = this;
                that.$loading.open();
                fetch("GET", "/dms/mobile/maintainTask/delTool?id=" + item.id).then((res) => {
                    uni.$emit("openToast", {
                        type: "success",
                        title: "操作成功",
                        complete() {
                            list.splice(index, 1);
                            that.$loading.close();
                        },
                    });
                });
            },
            close() {
                uni.navigateBack({
                    delta: 1, //返回上一页
                });
            },
            save() {
                let valid = true;
                const that = this;
                const arr = that.data.dcmMaintainProject;
                for (let i = 0; i < arr.length; i++) {
                    const subTask = arr[i];
                    if (!subTask.resultStatus) {
                        valid = false;
                        break;
                    }
                }
                if (!valid) {
                    uni.$emit("openToast", {
                        type: "success",
                        title: "请完善保养信息"
                    });
                    return;
                }
                // 验证通过
                that.loading = true;
                let assistMaintainBy = null;
                let assistMaintainByUserIds = null;
                if (that.assisterList && that.assisterList.length != 0) {
                    assistMaintainBy = that.assisterList.map(item => {
                        return item.name
                    });
                    assistMaintainByUserIds = that.assisterList.map(item => {
                        return item.id;
                    });
                }
                const results = [];
                for (let i = 0; i < arr.length; i++) {
                    const subTask = arr[i];
                    const data = {
                        taskId: that.data.id,
                        projectId: subTask.id,
                        resultStatus: subTask.resultStatus,
                        resultValue: subTask.resultValue
                    };
                    results.push(data);
                }
                const data = {
                    taskId: that.data.id,
                    results
                };
                if (assistMaintainBy && assistMaintainByUserIds) {
                    data.assistMaintainBy = assistMaintainBy;
                    data.assistMaintainByUserIds = assistMaintainByUserIds;
                }
                fetch("post", "/dms/mobile/maintainTask/complete", data).then(
                    (res) => {
                        that.loading = false;
                        uni.$emit("openToast", {
                            type: "success",
                            title: "操作成功",
                            complete() {
                                // 删除协助用户缓存
                                const selections = uni.getStorageSync(that.storageKey) || [];
                                selections.splice(0, selections.length);
                                uni.setStorageSync(that.storageKey, selections);
                                // 返回上一页
                                uni.navigateBack({
                                    delta: 1,
                                });
                            },
                        });
                    }
                ).catch(() => {
                    that.loading = false;
                });
            },
        },
    };
</script>

<style scoped lang="scss">
    .container {
        height: 100%;
        overflow: auto;
        display: flex;
        flex-direction: column;
        padding: 20rpx;
        padding-bottom: 150rpx;

        /deep/ .u-form-item__body__left__content__label {
            margin-left: 20rpx;
        }

        /deep/ .uni-select__input-placeholder {
            color: #cbc9cc !important;
            font-size: 15px !important;
        }
    }

    .content {
        padding: 30rpx 30rpx;
        background-color: #ffffff;
        border-radius: 5px;
        box-shadow: 0 12rpx 18rpx -6rpx rgba(0, 0, 0, 0.2);
        margin-bottom: 20rpx;

        .title {
            font-size: 30rpx;
            font-weight: bold;
            margin: 40rpx 0 20rpx;

            &:first-child {
                margin-top: 0;
            }
        }
    }

    .simple-table-scroll {
        overflow: auto hidden;

        .simple-table {
            width: 100%;
            font-size: 28rpx;

            .simple-table-tr {
                display: flex;
                border-left: 1px solid #eee;

                &:last-child {
                    border-bottom: 1px solid #eee;
                }

                .simple-table-th,
                .simple-table-td {
                    justify-content: center;
                    align-items: center;
                    text-overflow: ellipsis;
                    overflow: hidden;
                    white-space: nowrap;
                    text-align: center;
                    padding: 10rpx;
                    min-width: 132rpx;
                }

                .simple-table-th {
                    background-color: #f2f2f2;
                    color: #666;
                }

                .simple-table-td {
                    border-right: 1px solid #eee;
                    border-top: 1px solid #eee;
                    padding: 20rpx 10rpx;
                }
            }
        }

        .simple-table-flex {
            flex: 1;
            display: flex;
        }
    }



    .data-select {
        /deep/ .uni-select__selector {
            top: -155px;

            .uni-popper__arrow {
                display: none;
            }
        }
    }

    .box-item {
        margin-bottom: 20rpx;
        display: flex;
        align-items: center;

        .label {
            width: 130rpx;
            margin-right: 20rpx;
            color: #777;
        }

        .box-input {
            margin: 0 20rpx;
        }
    }

    .link {
        width: 100%;
        text-align: center;
        color: #3c9cff;
        padding: 10px 0;
    }

    .add-btn {
        width: 100%;
        text-align: center;
        color: #3c9cff;
        margin: 20px 0 10px;
    }

    .delete-btn {
        height: auto;
        width: auto;
        padding: 0;
    }
</style>